<template>
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        :width="width"
        :close-on-click-modal="closeOnClickModal"
        :close-on-press-escape="closeOnPressEscape"
        :show-close="showClose"
        :destroy-on-close="destroyOnClose"
        :draggable="draggable"
        :center="center"
        @open="handleOpen"
        @opened="handleOpened"
        @close="handleClose"
        @closed="handleClosed"
    >
        <!-- 默认插槽 -->
        <slot></slot>
        
        <!-- 页脚插槽 -->
        <template #footer v-if="!hideFooter">
            <slot name="footer">
                <span class="dialog-footer">
                    <el-button @click="handleCancel">{{ cancelText }}</el-button>
                    <el-button type="primary" @click="handleConfirm" v-if="showConfirmBtn" :loading="confirmLoading">
                        {{ confirmText }}
                    </el-button>
                </span>
            </slot>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    // 是否显示弹窗
    modelValue: {
        type: Boolean,
        default: false
    },
    // 标题
    title: {
        type: String,
        default: ''
    },
    // 宽度
    width: {
        type: [String, Number],
        default: '50%'
    },
    // 是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
        type: Boolean,
        default: false
    },
    // 是否可以通过按下 ESC 关闭 Dialog
    closeOnPressEscape: {
        type: Boolean,
        default: true
    },
    // 是否显示关闭按钮
    showClose: {
        type: Boolean,
        default: true
    },
    // 关闭时是否销毁 Dialog 中的元素
    destroyOnClose: {
        type: Boolean,
        default: false
    },
    // 是否可拖拽
    draggable: {
        type: Boolean,
        default: false
    },
    // 是否居中
    center: {
        type: Boolean,
        default: false
    },
    // 是否隐藏页脚
    hideFooter: {
        type: Boolean,
        default: false
    },
    // 确认按钮文字
    confirmText: {
        type: String,
        default: '确定'
    },
    // 取消按钮文字
    cancelText: {
        type: String,
        default: '取消'
    },
    // 确认按钮是否显示
    showConfirmBtn: {
        type: Boolean,
        default: true
    },
    // 确认按钮加载状态
    confirmLoading: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits([
    'update:modelValue',
    'open',
    'opened',
    'close',
    'closed',
    'cancel',
    'confirm'
])

// 弹窗显示状态
const dialogVisible = ref(props.modelValue)

// 监听 modelValue 变化
watch(() => props.modelValue, (val) => {
    dialogVisible.value = val
})

// 监听 dialogVisible 变化
watch(() => dialogVisible.value, (val) => {
    emit('update:modelValue', val)
})

// 打开前的回调
const handleOpen = () => {
    emit('open')
}

// 打开后的回调
const handleOpened = () => {
    emit('opened')
}

// 关闭前的回调
const handleClose = () => {
    emit('close')
}

// 关闭后的回调
const handleClosed = () => {
    emit('closed')
}

// 取消按钮点击事件
const handleCancel = () => {
    dialogVisible.value = false
    emit('cancel')
}

// 确认按钮点击事件
const handleConfirm = () => {
    emit('confirm')
}
</script>

<style scoped>
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
</style>

